<%--
  Created by IntelliJ IDEA.
  User: 0927
  Date: 2020/10/5
  Time: 6:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最近成交</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/sellCar.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/footer.css">
</head>

<style>
    .record-v{
        line-height: 140px;
        text-align: center;
        font-size: 24px;
        color: #495056;
    }
    .free{
        line-height: 16px;
        font-size: 16px;
        color: #8a8d96;
        text-align: center;
    }
    em{
        color: #22ac38;
        font-style: normal;
    }

    .img-p{
        width: 60px;
        height: 60px;
        margin: 30px auto 10px;
        background: url("${pageContext.request.contextPath}/images/xrb.png") no-repeat;
    }
    .user-info{
        margin-bottom: 24px;
        font-size: 18px;
        color: #495056;
        text-align: center;
    }
    .user-info span{
        display: block;
        font-size: 14px;
        color: #a5abb2;
        text-align: center;
    }
    .body{
        background-color: #f8f8f8;
    }
    .person{
        background-color: #fff;
        /*border: 1px solid #dcdcdc;*/
    }
    .pricedown{
        height: 18px;
        margin-right: 9px;
        padding-right: 2px;
        line-height: 18px;
        color: #ff7e00;
        border: 1px solid #ff7e00;
    }
    .through{
        font-size: 14px;
        color: #999;
        text-decoration: line-through;
        text-decoration-line: line-through;
        text-decoration-style: solid;
        text-decoration-color: currentcolor;
        text-decoration-thickness: auto;
    }
    .mile{
        font-size: 12px;
        color: #999;
    }
</style>

<body>
<!--footer-->
<div id="nav_my">

</div>



<!--服务 end-->

<!--question begin-->
<div class="container-fluid">
    <div class="row record-v" style="height: 140px">历史成交的车源记录</div>

    <c:if test="${empty newRecentList}">
        <div style="text-align: center; height: 100%">
            <div style="margin-top: 20%">
                <div style="margin-bottom: 10px;font-size: 30px;color: #757f89;text-align: center;">
                    未找到对应的成交记录
                </div>
                <div style="text-align: center;">
                    <a href="${pageContext.request.contextPath}/NavJsp/toBuyCar" style="font-size: 16px; color: #22ac38;">
                        去逛逛瓜子海量车源
                    </a>
                </div>
            </div>

        </div>
    </c:if>
    <!--        缩略图-->
    <div class="row person bargain">
        <c:forEach var="x" items="${newRecentList}" begin="0" end="12">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="${pageContext.request.contextPath}/images/car1.png"
                         alt="" style="width: 80%;">
                    <div class="caption car_info ">
                        <p style="font-size: 16px">${x.brName}${x.stName} ${x.cPaifang}L ${x.cDrive}
                        </p>
                        <span class="mile">${x.cRegistration}年 | ${x.cMileage}万公里 | 到店服务</span>
                        <p style="margin-top: 5px">成交价 <span style="color: #f76367;font-size: 18px">${x.rePrice}万</span>&nbsp;&nbsp;<strong>2天卖出</strong></p>
                    </div>
                </div>
            </div>
        </c:forEach>
    </div>
    <!--        缩略图-->

    <br>
    <br>
<%--    搜索框--%>
    <div class="row" style="height: 60px">

        <div class="input-group input-group-lg col-md-4" style="margin: 0 auto;">
            <!-- <div class="input-group input-group-sm"> -->
            <input type="text" class="phone form-control input-lg" value="" name="buycar" id="buycar" placeholder="请输入手机号码，200万名车主已经提交">
<%--            <input type="text" class="phone" value="" name="codes" id="codes" placeholder="请输入验证码">--%>
<%--            <p><a href="javascript:void(0)" id="getCode">获取验证码</a></p>--%>
            <span class="input-group-btn">
                <button class="btn btn-default btn-primary" data-toggle="modal" type="button" onclick="show_modal();" id="sell">免费卖车</button>
            </span>

            <!-- 模态框（Modal） -->
            <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="ModalLabel">手机验证</h4>
                        </div>
                        <div class="modal-body">

                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label for="phones" class="col-md-2 control-label">手机号</label>
                                    <div class="col-md-8">
                                        <input type="text" class="form-control" id="phones">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="codes" class="col-md-2 control-label">验证码</label>
                                    <div class="col-md-8">
                                        <div class="col-md-8">
                                            <input type="text" class="form-control" class="phone" value="" name="codes" id="codes" placeholder="请输入验证码">
                                        </div >
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-primary" id="getCode" onclick="getCode1()">获取验证码</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-offset-2 col-md-10">
                                        <button type="button" class="btn btn-primary" style="margin-left: 25%" onclick="show_modal1()">确认卖车</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>

            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">精翼卖车</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label for="brNames" class="col-md-4 control-label">所属品牌</label>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control" id="brNames" placeholder="请输入品牌">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="stNames" class="col-md-4 control-label">所属车系</label>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control" id="stNames" placeholder="请输入所属车系">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="carRegistration" class="col-md-4 control-label">上牌时间</label>
                                    <div class="col-md-6">
                                        <input type="date" class="form-control" id="carRegistration" placeholder="请输入上牌时间">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="carMileage" class="col-md-4 control-label">行驶里程</label>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control" id="carMileage" placeholder="请输入行驶里程">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="carDesc" class="col-md-4">文本框</label>
                                    <div class="col-md-6">
                                        <textarea class="form-control" rows="3" id="carDesc"></textarea>
                                    </div>
                                </div>
                            </form>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" onclick="register()">提交更改</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
    </div>
    </div>
    <p class="free">免费咨询：<em>400-069-6540</em></p>
    <br>

    <div class="row question">
        <h2>精翼问答</h2>
        <div class="left">
            <h3>Q1：卖车流程是怎样的？</h3>
            <p>1、在本页填写卖车信息或拨打400-023-1529联系我们。<br/>
                2、由检测师进行车辆信息收集，并经过瓜子评估，给出瓜子价参考，由车主确定发布报价。<br/>
                3、达成交易合同，支付车款并过户。
            </p>
            <br>

            <h3>Q2:通过精翼网站出售车辆需要什么费用？</h3>
            <p>精翼网站上门验车不收取费用，免费评估，并为您免费提供车辆检测报告，整个服务过程全部免费。</p>
            <br>
            <h3>Q3:大概多长时间能够成交？</h3>
            <p>根据我们的经验，大部分车辆平均7日可以成交。但车辆的出售时间受市场情况、车况等多因素影响。</p>
        </div>
        <div class="right">
            <h3>Q4：卖车需要准备什么？</h3>
            <p>
                1、身份证；<br>
                2、环保标；<br>
                3、购置税本；<br>
                4、行驶证；<br>
                5、检字标；<br>
                6、购置税发票；<br>
                7、车辆登记证；<br>
                8、交强险标；<br>
                9、购车发票/最近一次过户发票；<br>
                10、交强险单。
            </p>
        </div>
    </div>
</div>
<!--footer-->
<div id="footer">

</div>
<!--footer-->
<!--question end-->
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
    function register(){
        //一个控件一个控件进行获取了
        let brName = $("#brNames").val();
        let stName = $("#stNames").val();
        let carRegistration = $("#carRegistration").val();
        let carMileage = $("#carMileage").val();
        let carDesc = $("#carDesc").val();
        let call = $("#phones").val();
        let datas = {"brName":brName,"stName":stName,"carRegistration":carRegistration,"carMileage":carMileage,"carDesc":carDesc,"call":call};
        $.post('${pageContext.request.contextPath}/carSales/sales',datas,function(data){
            if (data.code == "200"){
                $('#myModals').modal('hide');
                alert("预约卖车成功");
            }
        });
    }
    var obj = document.getElementById("getCode");
    var fl = 60;//全局变量
    // obj.onclick = function () {
        function getCode1() {
            var phone = document.getElementById("phones").value;
            if(!(/^1[3456789]\d{9}$/.test(phone))){
                alert("请输入正确的手机号");
                return;
            }else if (fl<60){
                //防止多次点击bug，控制正常倒计时
                alert("验证码已发送");
                return;
            }else {
                //根据号码ajax请求实现发送验证码
                $.ajax({
                    type:'GET',
                    dataType:"json",
                    url:'${pageContext.request.contextPath}/send/'+phone,
                    success:function (data) {
                        if (data.code == "200"){
                            timer();
                            alert("发送成功")
                        } else {
                            alert("发送失败")
                        }
                    }
                });
            }
        }

    // };
    //计时器
    function timer(){
        fl--;
        obj.innerHTML = fl+"s";
        if (fl==0){
            obj.innerHTML="获取验证码";
            fl = 60;
        }else {
            setTimeout("timer()",1000);//递归调用
        }
    }

    function show_modal() {
        var phone = document.getElementById("buycar").value;
        if(!(/^1[3456789]\d{9}$/.test(phone))){
            alert("请输入正确的手机号");
            return;
        }else{
            document.getElementById("phones").value=phone;
            $('#modal').modal('show');
        }
    }

    function show_modal1() {
        let code = $("#codes").val();
        var phone = document.getElementById("buycar").value;
        if(!(/^1[3456789]\d{9}$/.test(phone))){
            alert("请输入正确的手机号");
            return;
        }else if(!(/^\d{4}$/.test(code))){
            alert("请输入正确的验证码");
            return;
        }else {
            //ajax发送输入的验证码与手机号到后台校验
            $.ajax({
                type:'GET',
                dataType:"json",
                url:'${pageContext.request.contextPath}/send/'+phone+'/'+code,
                success:function (data) {
                    if (data.code == "200"){
                        $('#myModals').modal('show');
                        $('#modal').modal('hide');
                    } else {
                        alert("输入错误，请重新输入")
                    }
                }
            });
        }
    }

    $(function(){
        $("#nav_my").load("${pageContext.request.contextPath}/loadJsp/toNav");
        $("#footer").load("${pageContext.request.contextPath}/loadJsp/toFooter");
    })
</script>
</body>
</html>
